<template>
	<div class="c-table">
		<el-table :data="tableData" stripe>

			<el-table-column type="expand">
				<template slot-scope="props">
					<div class="expand-block">
            <div v-for=" item in props.row.orderItems">
              <div><img :src="item.product.firstProductImage.address" alt="无图" v-if="item.product.firstProductImage.address"></div>

              <a @click="jump2Product(item.product.id)">{{item.product.name}}</a>
              <div>{{item.number}}个</div>
              <div>单价： ￥{{item.product.promotePrice}}</div>
            </div>
					</div>
				</template>
			</el-table-column>


			<el-table-column prop="id" label="ID" width="60px" align="center"></el-table-column>
			<el-table-column label="状态" width="70px" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.statusDesc}}</span>
				</template>
			</el-table-column>

			<el-table-column label="金额" align="center" width="100px">
				<template slot-scope="scope">
					<span>￥{{scope.row.total}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="totalNumber" label="商品数量" align="center" width="80px"></el-table-column>
			<el-table-column prop="user.name" label="买家名称" align="center"></el-table-column>
			<el-table-column prop="creatDate" label="创建时间" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.creatDate">{{converTime(scope.row.creatDate)}}</span>
				</template>

      </el-table-column>
			<el-table-column prop="payTime" label="支付时间" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.payDate">{{converTime(scope.row.payDate)}}</span>
				</template>
      </el-table-column>
			<el-table-column prop="sendTime" label="发货时间" align="center">
        <template slot-scope="scope">
        	<span v-if="scope.row.deliverDate">{{converTime(scope.row.deliverDate)}}</span>
        </template>
      </el-table-column>

			<el-table-column prop="receiveTime" label="确认收货时间" align="center">
        <template slot-scope="scope">
        	<span v-if="scope.row.confirmDate">{{converTime(scope.row.confirmDate)}}</span>
        </template>
      </el-table-column>

			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="send(scope.row.id)" v-if="scope.row.statusDesc=='waitDelivery'">发货</el-button>
				</template>
			</el-table-column>

		</el-table>
		<page-num :totalPages="totalPages" :currentPage="currentPage"></page-num>
	</div>
</template>

<script>
	import PageNum from './page_num.vue'
  import {getOrder,UpdateOrder} from '@/api/admin/order.js'
	export default{
		data() {
			return {
				tableData: [],
        currentPage:1,
        totalPages:null,
			}
		},
		components: {
			PageNum,
		},
		methods: {
      getTableData(){
        this.currentPage = this.$route.query.pageId ? this.$route.query.pageId : 1
        let data = {start:this.currentPage}
        getOrder(data).then(res => {
          this.tableData = res.data.pageFromJPA.content
          this.totalPages = res.totalPages
        })
      },
      converTime(n){
        var unixTimestamp = new Date(n)
        return unixTimestamp.toLocaleString()
      },
      send(id){
        // let data = new FormData()
        // data.append('oid',id)
		let data = {oid:id}
        UpdateOrder(data).then(res => {
          if(this.code == 200){
            this.$message({
              type:'success',
              message:'发货成功'
            })
            this.getTableData()
          }
        })
      }
		},
    created() {
      this.getTableData()
    }
	}
</script>

<style scoped>
	.c-table{
		width: 90%;
		margin: 10px auto;
	}
	.c-table i{
		font-size: 20px;
	}
	.c-table i:hover{
		color: #409EFF;
	}
	.expand-block>div{
		line-height: 40px;
    overflow: hidden;
    padding: 20px 0;
	}
  .expand-block>div>div:first-child{
    width: 40px;
    height: 40px;
    margin-left: 200px;
    float: left;
  }
	.expand-block>div>div:first-child>img{
		height: 40px;
    width: 40px;
    overflow: hidden;
	}
	.expand-block>div>a{
		color: black;
		text-decoration: none;
    display: block;
    width: 500px;
    float: left;
    margin-left: 50px;
	}
	.expand-block>div>a:hover{
		text-decoration: underline;
	}
  .expand-block>div>div:nth-child(3){
    float: left;
    width: 80px;
    height: 40px;
    margin-left: 50px;
  }
  .expand-block>div>div:nth-child(4){
    float: left;
    width: 180px;
    height: 40px;
    margin-left: 50px;
  }
  .expand-block>div:after{
    clear: both;
  }
</style>
